<template>
  <div class="app-table-topbar">
    <slot />
    <div v-if="hasExport" class="app-table-topbar__content--right">
      <el-button v-if="isLocal" type="primary" size="small" @click="exportCurrent">导出全部</el-button>
      <el-dropdown v-else split-button type="primary" size="small" @click="handleExport" @command="handleCommand">
        导出
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="current">导出当前</el-dropdown-item>
          <el-dropdown-item command="total">导出全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import export2type from './export'
// import request from '@/api'

export default {
  name: 'AppTableTopbar',
  componentName: 'AppTableTopbar',
  inject: {
    appTable: {
      default: ''
    }
  },
  props: {
    hasExport: Boolean,
    exportType: {
      type: String,
      default: 'xlsx',
      validator(value) {
        const typeReg = /^(xls|xlsx|xlsm|xlsb|csv)$/
        const isValidate = typeReg.test(value)
        if (!isValidate) {
          throw new Error(`Invalid type of '${ value }', please set one type of ['xls', 'xlsx', 'xlsm', 'xlsb' ,'csv']`)
        }
        return isValidate
      }
    },
    exportName: {
      type: String,
      default: 'excel-' + new Date().getTime()
    },
    exportFnCurrent: Function,
    exportFnTotal: Function
  },
  computed: {
    isLocal() {
      return this.appTable.internalFetchType === 'local'
    }
  },
  methods: {
    handleCommand(cmd) {
      if (cmd === 'current') this.exportCurrent()
      else if (cmd === 'total') this.exportTotal()
    },
    handleExport() {
      const { size, total } = this.appTable.internalPagination
      this[ total > size ? 'exportTotal' : 'exportCurrent' ]()
    },
    handleGenerateColumns() {
      let cols = []
      const { columns, $slots } = this.appTable
      if (columns.length) {
        cols = columns
      } else {
        $slots.default && $slots.default.length && $slots.default.forEach(slot => {
          if (slot.tag && slot.componentOptions) {
            cols.push(slot.componentOptions.propsData)
          }
        })
      }
      return cols
    },
    exportCurrent() {
      const { internalTableData, internalRealTableData } = this.appTable
      const columns = this.handleGenerateColumns()
      const header = columns.map(item => item.type ? item.type : item.label)
      const data = this.isLocal
        ? internalRealTableData.map(item => columns.map(key => item[key.prop]))
        : internalTableData.map(item => columns.map(key => item[key.prop]))

      this.exportFnCurrent ? this.exportFnCurrent(header, data, this.exportName, this.exportType) : export2type(header, data, this.exportName, this.exportType)
    },
    exportTotal() {
      const table = this.appTable
      const multi = this.appTable.MULS
      const isStd = table.stdPagination
      const { index, size } = this.appTable.internalPagination
      this.$alert('远程导出功能尚未完善')
      if (this.exportFnTotal) {
        isStd ? this.exportFnTotal(index, size) : this.exportFnTotal(index, size * multi, size)
        return false
      } else {
        //
      }
    }
  }
}
</script>
